<?php
/**
 * Created by PhpStorm.
 * User: wodrow
 * Date: 19-6-24
 * Time: 上午9:40
 */
/**
 * @var \yii\web\View $this
 */

use kartik\helpers\Html;
use wodrow\yii2wtools\tools\JsBlock;

?>

<div class="site-test1">
    <div id="app">
        <form action="" method="get">
            <select name="car_use_type" v-model="car_use_type" style="width: 100px;">
                <option v-for="t in car_use_types" :value="t.v">{{t.text}}</option>
            </select>
            <select name="ot_car_model" v-model="ot_car_model" style="width:200px;">
                <option v-for="s in allSeries" :data-cs_id="s.cs_id" :value="s.cs_car_text" :data-cs_car_brand="s.cs_car_brand">{{s.cs_car_text}}</option>
            </select>
            <select name="ot_car_fullmodel" v-model="ot_car_fullmodel" style="width:300px;">
                <option v-for="m in allModels" :data-model_id="m.model_id" :value="m.model_name">{{m.model_name}}</option>
            </select>
            <input type="hidden" name="ot_car_brand" :value="ot_car_brand">
            <?=Html::submitButton('submit') ?>
        </form>
    </div>
</div>

<?php JsBlock::begin(); ?>
<script>
    // axios.post('http://test.api.qiche100.com/test/test/test').then(function (response) {
    //     console.log(response);
    // }).catch(function (error) {
    // });
    // axios.defaults.crossDomain=true;
    // axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded';
    // axios.defaults.headers['Access-Control-Allow-Origin'] = '*';
    // axios.withCredentials = false; // 允许携带cookie
    toastr.options = {
        "closeButton": false,//显示关闭按钮
        "debug": false,//启用debug
        "positionClass": "toast-top-center",//弹出的位置
        "showDuration": "300",//显示的时间
        "hideDuration": "1000",//消失的时间
        "timeOut": "5000",//停留的时间
        "extendedTimeOut": "1000",//控制时间
        "showEasing": "swing",//显示时的动画缓冲方式
        "hideEasing": "linear",//消失时的动画缓冲方式
        "showMethod": "fadeIn",//显示时的动画方式
        "hideMethod": "fadeOut"//消失时的动画方式
    };
    var app = new Vue({
        el: "#app",
        data: {
            uid: 1,
            bank_id: 11,
            car_use_type: 'cyc',
            car_use_types: [{v: "cyc", text: "乘用车"}, {v: "syc", text: "商用车"}],
            ot_car_brand: '',
            allSeries: [],
            series_id: '',
            ot_car_model: '',
            allModels: [],
            model_id: '',
            ot_car_fullmodel: ''
        },
        mounted: function () {
            let _this = this;
            $('select[name="car_use_type"]').select2();
            $('select[name="car_use_type"]').on("change", function () {
                _this.car_use_type = $(this).find('option:checked').val();
            }).on("change.select2", function () {
                _this.getSeries();
            });
            $('select[name="ot_car_model"]').select2();
            $('select[name="ot_car_model"]').on("change", function () {
                _this.series_id = $(this).find('option:checked').data('cs_id');
                _this.ot_car_model = $(this).find('option:checked').val();
                _this.ot_car_brand = $(this).find('option:checked').data('cs_car_brand');
            }).on("change.select2", function () {
                _this.getModels();
            });
            $('select[name="ot_car_fullmodel"]').select2();
            $('select[name="ot_car_fullmodel"]').on("change", function () {
                _this.model_id = $(this).find('option:checked').data('model_id');
                _this.ot_car_fullmodel = $(this).find('option:checked').val();
            });
            $('select[name="car_use_type"]').val(this.car_use_type).trigger('change');
        },
        methods: {
            getSeries: function () {
                let _this = this;
                _this.allSeries.splice(0);
                _this.allModels.splice(0);
                $.ajax({
                    url: api_url_pre + '/chedai/car/get-all-car-series1',
                    type: 'get',
                    async: true,
                    datatype: "json",
                    data: {
                        uid: this.uid,
                        bank_id: this.bank_id,
                        car_use_type: this.car_use_type
                    },
                    success: function(msg){
                        if (msg.code !== 200) {
                            toastr.error(msg.message);
                        } else {
                            msg.data.all_series.forEach(function (v) {
                                _this.allSeries.push(v);
                            });
                        }
                    }
                });
            },
            getModels: function () {
                let _this = this;
                _this.allModels.splice(0);
                $.ajax({
                    url: api_url_pre + '/chedai/car/get-all-car-models-by-series-id1',
                    type: 'get',
                    async: true,
                    datatype: "json",
                    data: {
                        uid: this.uid,
                        bank_id: this.bank_id,
                        car_use_type: this.car_use_type,
                        series_id: this.series_id
                    },
                    success: function(msg){
                        if (msg.code !== 200) {
                            toastr.error(msg.message);
                        } else {
                            msg.data.all_models.forEach(function (v) {
                                _this.allModels.push(v);
                            });
                        }
                    }
                });
            },
            getSeries1: function () {
                this.allSeries.splice(0);
                axios.get('http://test.api.qiche100.com/chedai/car/get-all-car-series1', {
                    params: {
                        uid: this.uid,
                        bank_id: this.bank_id,
                        car_use_type: this.car_use_type
                    }
                }).then(function (response) {
                    if (response.data.code !== 200) {
                        toastr.error(response.data.message);
                    } else {
                        response.data.data.all_series.forEach(function (v) {
                            app.allSeries.push(v);
                        });
                    }
                }).catch(function (error) {
                });
            },
            getModels1: function () {
                this.allModels.splice(0);
                axios.get('http://test.api.qiche100.com/chedai/car/get-all-car-models-by-series-id1', {
                    params: {
                        uid: this.uid,
                        bank_id: this.bank_id,
                        car_use_type: this.car_use_type,
                        series_id: this.series_id
                    }
                }).then(function (response) {
                    if (response.data.code !== 200) {
                        toastr.error(response.data.message);
                    } else {
                        response.data.data.all_models.forEach(function (v) {
                            app.allModels.push(v);
                        });
                    }
                }).catch(function (error) {
                });
            },
            test: function () {
                alert(123);
            },
            log: function (v) {
                console.log(v);
            }
        }
    });
</script>
<?php JsBlock::end(); ?>
